<template>
	<div class="main">
		<div class="main-header" style="justify-content: space-between;">
			<!-- <el-button
                v-for="(item, index) in buttons"
                :key="index"
                :type="item.path | formatType"
                :icon="item.icon"
                :disabled="item.path | formatDisabled(selection)"
                @click="tapButton(item)"
                >{{ item.title }}</el-button
            > -->
			<div style="display: flex;">
				<el-input placeholder="请输入内容" style="width: 200px;margin-right: 10px;" v-model="searchParamCp.keyword"
					size="mini" clearable>
				</el-input>
				<el-select v-model="searchParamCp.pay_status" size="mini" placeholder="请选择售后状态"
					style="width: 200px;margin-right: 10px;">
					<el-option v-for="item in paylist" :key="item.id" :label="item.label" :value="item.id">
					</el-option>
				</el-select>
				<el-select v-model="searchParamCp.status" size="mini" placeholder="请选择订单状态"
					style="width: 200px;margin-right: 10px;">
					<el-option v-for="item in typelist" :key="item.id" :label="item.label" :value="item.id">
					</el-option>
				</el-select>
				<div class="timepick">
					<el-date-picker clearable v-model="searchParamCp.search_time" value-format="yyyy-MM-dd" size="mini"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<el-button type="primary" size="mini" @click="searchs()">搜索</el-button>
				<el-button size="mini" @click="reset()">重置</el-button>
			</div>
			<div>
				<!-- <el-button type="primary" size="mini" @click="exportExcel">导出</el-button> -->
			</div>
		</div>
		<el-table ref="table" class="main-table" :data="memberData" height="100%" border
			header-cell-class-name="main-table-header" @selection-change="onSelectionChange">
			<el-table-column type="selection" width="39"></el-table-column>
			<el-table-column align="center" label="会员昵称" prop="wxName" />
			<el-table-column align="center" label="订单号" prop="order_sn" width="180px" />
			<el-table-column width="120px" align="center" label="电话号码" prop="phoneNumber" />
			<el-table-column align="center" width="100px" label="订单总金额" prop="total_money" />
			<!-- <el-table-column align="center" width="100px" label="运费" prop="freight_money" /> -->
			<el-table-column align="center" label="支付金额" prop="pay_money" />
			<el-table-column align="center" label="下单时间" prop="addtime" width="180px">
				<template slot-scope="{row}">
					{{ row.addtime | formatDate }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="支付时间" prop="pay_time" width="180px">
				<template slot-scope="{row}">
					{{ row.pay_time | formatDate }}
				</template>
			</el-table-column>
			<el-table-column align="center" label="订单状态" prop="status" width="120px">
				<template slot-scope="{row}">
					<!-- //status  0待付款 1待发货 2待收货 3待评价 4已取消 5售后退款中 6已完成 7售后完成 -->
					<el-tag v-if="row.status == 2">待收货</el-tag>
					<el-tag v-if="row.status == 7" type="success">售后完成</el-tag>
					<el-tag v-if="row.status == 6" type="success">已完成</el-tag>
					<el-tag v-if="row.status == 4" type="info">已取消</el-tag>
					<el-tag v-if="row.status == 1" type="warning">待发货</el-tag>
					<el-tag v-if="row.status == 3" type="warning">待评价</el-tag>
					<el-tag v-if="row.status == 5" type="danger">售后退款中</el-tag>
					<el-tag v-if="row.status == 8" type="danger">部分退款</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="售后类型" prop="ref_type" width="120px">
				<template slot-scope="{row}">
					<!-- // ref_type 1退款退货 2退款不退货 3我要换货 -->
					<el-tag v-if="row.ref_type == 1">退款退货</el-tag>
					<el-tag v-if="row.ref_type == 2" type="success">退款不退货</el-tag>
					<el-tag v-if="row.ref_type == 3" type="success">我要换货</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="售后状态" prop="status" width="120px">
				<template slot-scope="{row}">
					<!-- // ref_status 0申请售后中 1 平台同意售后 2平台拒绝售后 3售后完成 -->
					<el-tag v-if="row.ref_status == 0">申请售后中</el-tag>
					<el-tag v-if="row.ref_status == 1" type="success">平台同意售后</el-tag>
					<el-tag v-if="row.ref_status == 2" type="success">平台拒绝售后</el-tag>
					<el-tag v-if="row.ref_status == 3" type="info">售后完成</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="订单类型" prop="delivery_method" width="120px">
				<template slot-scope="{row}">
					<!-- //delivery_method =1配送订单delivery_method =2自提订单-->
					<!-- order_type 1 商城购买  2积分兑换 -->
					<el-tag v-if="row.order_type == 1">商城购买</el-tag>
					<el-tag v-if="row.order_type == 2" type="success">积分兑换</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="支付状态" prop="pay_status" width="120px">
				<template slot-scope="{row}">
					<!-- // 0未支付 1已支付 -->
					<el-tag v-if="row.pay_status == 1" type="success">已支付</el-tag>
					<el-tag v-if="row.pay_status == 0" type="warning">未支付</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" width="200px">
				<template slot-scope="{row}">
					<el-button v-if="$auth('edit')" type="primary" @click="onCheck(row)">详情</el-button>
					<!-- //0申请售后中 1 平台同意售后 2平台拒绝售后 3售后完成 -->
					<!-- //status  0待付款 1待发货 2待收货 3待评价 4已取消 5售后退款中 6已完成 7售后完成 8部分退款 -->
					<!--ref_status 0申请售后中 1 平台同意售后 2平台拒绝售后 3售后完成 -->
					<el-button v-if="$auth('examine')" type="primary"
						:disabled="row.ref_status !== 0 || row.status !== 5 && row.pay_status !== 1"
						@click="sentgoods(row)">审核</el-button>
					<!-- <el-button type="primary"  :disabled="row.ref_status!==1||row.pay_status!==1" @click="returnmoney(row)">确认退款</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total"
			@current-change="onCurrentChange" layout="total,jumper,prev,pager,next"></el-pagination>
		<el-dialog :visible.sync="dialogVisible" :title="dialogTitle" append-to-body width="800px" v-if="dialogVisible"
			@close="onDialogClose">
			<component :is="dialogView" @update="getMemberData" @search="search" :id="orderid" @send="send" @agree="agree"
				:reinfo="reinfo"></component>
		</el-dialog>
		<!-- <Info ref="info" :formData="orderinfo" @close="onDialogClose" /> -->
	</div>
</template>

<script>
import {
	get, post
} from "@/assets/js/http.js";
import { Result } from "element-ui";
export default {
	name: "view-aftersales",
	data() {
		return {
			memberData: [],
			selection: [],
			page: 1,
			limit: 20,
			total: 0,
			dialogVisible: false,
			dialogTitle: "",
			dialogView: "",
			searchinfo: {
				keyword: '',
				search_time: [],
				status: '',
				pay_status: ''
			},
			searchParamCp: {},
			paylist: [{
				id: 1,
				label: '退款退货'
			}, {
				id: 2,
				label: '退款不退货'
			},
			{
				id: 3,
				label: '我要换货'
			}], //1退款退货 2退款不退货 3我要换货
			typelist: [{
				id: 0,
				label: '申请售后中'
			}, {
				id: 1,
				label: '平台同意售后'
			}, {
				id: 2,
				label: '平台拒绝售后'
			}, {
				id: 3,
				label: '售后完成'
			}], //0申请售后中 1 平台同意售后 2平台拒绝售后 3售后完成
			orderid: '', //订单详情
			reinfo: {},//售后信息
		};
	},
	computed: {
		buttons() {
			return this.$store.state.buttons;
		}
	},
	components: {
		Sent: () => import("./sent.vue"),
		Search: () => import("./search.vue"),
		// Info: () => import("./info.vue")
	},
	mounted() {
		this.getMemberData();
	},
	methods: {
		search(result) {
			this.page = 1;
			console.log(result);
		},
		searchs() {
			this.page = 1
			this.searchinfo = {
				...this.searchinfo,
				...this.searchParamCp
			}
			this.getMemberData()
		},
		//拒绝
		send(result) {
			console.log(result, 'result')
			const data = {
				id: result.ref_id,
				reason: result.reason
			}
			post({
				url: '/admin/order.Order/rejectRefound',
				data,
				successTip: true,
			}).then(res => {
				this.getMemberData()
			})
		},
		//同意
		async agree(result) {
			console.log(result, 'result')
			// const data = {
			// 	id:result.ref_id,
			// }
			// post({
			// 	url:'/admin/order.Order/checkRefound',
			// 	data,
			// 	successTip: true,
			// }).then(res=>{
			// 	this.getMemberData()
			// })
			await post({
				url: "/admin/order.Order/refMoney",
				data: {
					id: result.ref_id
				},
				successTip: true,
			});
			this.getMemberData();
		},
		reset() {
			this.searchParamCp = {}
			this.searchinfo = {
				keyword: '',
				search_time: [],
				status: '',
				pay_status: ''
			},
				this.getMemberData()
		},
		async getMemberData() {
			const data = await get({
				url: "/admin/order.Order/refoundlist",
				loading: true,
				params: {
					page: this.page,
					limit: this.limit,
					...this.searchinfo,
					...{
						search_time: this.searchinfo.search_time.length ? this.searchinfo.search_time.join(
							' - ') : ''
					}
				},
			});
			const list = data.list;
			this.total = data.total;
			list.forEach(item => {
				item.firstCostDate = item.firstCostDate?.slice(0, 10);
				item.latestCostDate = item.latestCostDate?.slice(0, 10);
			});
			this.memberData = list;
		},
		//导出
		async exportExcel() {
			this.$loading()
			let res = await get({
				export: true,
				url: '/admin/order.Order/export',
				params: {
					...this.searchinfo,
					...{
						search_time: this.searchinfo.search_time && this.searchinfo.search_time
							.length ? this.searchinfo.search_time.join(' - ') : ''
					}
				}
			})
			let a = document.createElement('a');
			var url = URL.createObjectURL(res);
			a.href = url;
			a.click();
			this.$loading().close()
		},
		onCurrentChange(index) {
			this.page = index;
			this.getMemberData();
		},
		//详情
		onCheck(row) {
			// this.dialogTitle = "查看客户照片";
			// this.dialogView = "Photo";
			// this.dialogView = "Info";
			// this.dialogVisible = true;
			this.orderid = row.id
			this.dialogVisible = true;
			this.dialogView = "Search";
		},
		sentgoods(row) {
			this.orderid = row.id
			this.reinfo = row
			this.dialogView = "Sent"
			this.dialogVisible = true;
		},
		//退款
		returnmoney(row) {
			this.$confirm(
				`此操作将对该订单进行退款, 是否继续?`,
				"提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}
			)
				.then(async () => {
					await post({
						url: "/admin/order.Order/refMoney",
						data: {
							id: row.ref_id
						},
						successTip: true,
					});
					this.getMemberData();
				})
				.catch(() => {
					// this.$refs.table.clearSelection();
				});
		},
		onSearch() {
			this.dialogTitle = "搜索";
			this.dialogView = "Search";
			this.dialogVisible = true;
		},
		onSelectionChange(selection) {
			this.selection = selection;
		},
		onRowClick(row) {
			this.$refs.table.toggleRowSelection(row);
			this.$refs.info.show();
		},
		onDialogClose() {
			this.$refs.table.clearSelection();
		},
		tapButton(item) {
			if (item.path === "check") {
				this.onCheck();
			} else if (item.path === "search") {
				this.onSearch();
			}
		}
	}
};
</script>
<style>
.timepick {
	width: 360px;
	margin-right: 10px;
}
</style>
